<template>
  <el-aside id="asideNav" :width="collapse ? 'auto' : '180px'">
    <div class="logo-name">
      <p>{{ collapse ? '后台' : '英语学习后端' }}</p>
    </div>

    <el-menu :default-active="currentActive()" active-text-color="#ffd04b" background-color="#545c64" text-color="#fff"
      :router="true" :collapse="collapse" :unique-opened="true" :collapse-transition="false">

      

      <el-menu-item index="/user/list">
        <el-icon>
         
        </el-icon>
        <span>用户管理</span>
      </el-menu-item>

      <el-menu-item index="/category/list">
        <el-icon>
         
        </el-icon>
        <span>版本管理</span>
      </el-menu-item>

      <el-menu-item index="/unit/list">
        <el-icon>
        
        </el-icon>
        <span>单元管理</span>
      </el-menu-item>

      <el-menu-item index="/book/list">
        <el-icon>
         
        </el-icon>
        <span>书籍管理</span>
      </el-menu-item>

      <el-menu-item index="/word/list">
        <el-icon>
          
        </el-icon>
        <span>单词管理</span>
      </el-menu-item>

      <el-menu-item index="/RateOfLearning/list">
        <el-icon>
          
        </el-icon>
        <span>学习进度</span>
      </el-menu-item>




    </el-menu>
  </el-aside>

</template>

<script setup>  
import { storeToRefs } from 'pinia'  
import { useRouter, useRoute } from "vue-router";  
import { useSystemStore } from '@/stores/system'  
  
const systemStore = useSystemStore();  
  
const { collapse } = storeToRefs(systemStore);  
  
// 获取路由对象  
const router = useRouter();  
const route = useRoute();  
  
const currentActive = () => {  
  let path = route.path;  
  path = path.substring(0, path.lastIndexOf("/")) + "/list";  
  return path;  
}  
</script>

<style scoped>
#asideNav {
  display: flex;
  flex-direction: column;
}

#asideNav .logo-name {
  width: 100%;
  height: 50px;
  background-color: #545c64;
}

#asideNav .logo-name p {
  height: 50px;
  line-height: 50px;
  text-align: center;
  font-size: 16px;
  margin: 0px;
  color: #fff;
}

#asideNav .el-menu {
  flex: 1;
  border-right: none;
}
</style>